<template>
  <div class="CompanyDetails">
    <van-nav-bar title="家政平台" left-arrow @click-left="$router.back()" />
    <!-- 内容详情 -->
    <van-cell-group class="details-img" inset>
      <van-cell>
        <van-image
          width="100%"
          height="100%"
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F78e3e960c811e5a9110c0ee3005f955cd7b2c4ca67f84-LGGXuu_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654227041&t=e51fb91040f35d902661cf3783daeba2"
        />
      </van-cell>
    </van-cell-group>
    <div class="details">
      <div>
        <div>{{ DetailsList.people }} <span>注册家政员数</span><i></i></div>
        <div>{{ DetailsList.customers }} <span>已认证客户数</span></div>
      </div>
      <button v-if="DetailsList.allow === 0" @click="cutAttention">关注</button>
      <button
        v-else
        style="background-color: #f8f8f8; color: #000"
        @click="cutAttention"
      >
        已关注
      </button>
    </div>

    <!-- 业务范围 -->
    <div class="range">
      <div class="bar">
        <span>业务范围</span>
      </div>
      <div class="footer">
        <div>
          <div class="top"><van-icon name="smile-o" /></div>
          <span>月嫂</span>
        </div>
        <div>
          <div class="top"><van-icon name="smile-o" /></div>
          <span>育婴师</span>
        </div>
        <div>
          <div class="top"><van-icon name="smile-o" /></div>
          <span>保姆</span>
        </div>
      </div>
    </div>
    <!-- 公司资料 -->
    <div class="datums">
      <div class="head">
        <div>公司资料</div>
        <div>注册人员</div>
      </div>
      <div>
        <div class="cont">
          <div class="bars"><span>公司资质</span></div>
          <van-grid :border="false" :column-num="3">
            <van-grid-item :gutter="10">
              <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
            </van-grid-item>
          </van-grid>
        </div>
        <div class="cont">
          <div class="bars"><span>获得荣誉</span></div>
          <van-grid :border="false" :column-num="3">
            <van-grid-item :gutter="10">
              <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
            </van-grid-item>
          </van-grid>
        </div>
        <div class="cont">
          <div class="bars"><span>办公环境</span></div>
          <van-grid :border="false" :column-num="3">
            <van-grid-item :gutter="10">
              <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
            </van-grid-item>
          </van-grid>
        </div>
        <div class="cont">
          <div class="bars"><span>团队风采</span></div>
          <van-grid :border="false" :column-num="3">
            <van-grid-item :gutter="10">
              <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
            </van-grid-item>
          </van-grid>
        </div>
      </div>
      <div class="basic">
        <div class="bars"><span>基本资料</span></div>
        <div class="date">
          <p>公司名称：{{ DetailsList.name }}</p>
          <p>法人代表：渣渣辉</p>
          <p>公司电话：{{ DetailsList.phone }}</p>
          <p>公司规模：200人以下</p>
          <p>公司地址：{{ DetailsList.address }}</p>
        </div>
      </div>
      <div class="introduce">
        <div class="bars"><span>公司介绍</span></div>
        <div class="text">
          <p>
            {{ DetailsList.detail }}
          </p>
        </div>
      </div>
    </div>
    <!-- 底部导航 -->
    <div class="details-footer">
      <van-tabbar
        :fixed="false"
        active-color="#979191"
        inactive-color="#979191"
      >
        <van-tabbar-item icon="share" @click="showShare = true"
          >分享</van-tabbar-item
        >
        <van-tabbar-item icon="wechat" @click="showQrCode"
          >微信公众号</van-tabbar-item
        >
        <van-tabbar-item icon="phone" @click="showPhone = true"
          >电话</van-tabbar-item
        >
      </van-tabbar>
    </div>

    <!-- 分享弹窗 -->
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
    />
    <!-- 二维码弹窗层-->
    <van-dialog
      v-model="showDialog"
      title="请扫描二维码"
      show-cancel-button
      :showCancelButton="false"
    >
      <span ref="qrCodejs"></span>
    </van-dialog>
    <!-- 联系电话弹窗 -->
    <van-popup
      v-model="showPhone"
      round
      position="bottom"
      :style="{ height: '8%' }"
    >
      <div>{{ DetailsList.phone }}</div>
    </van-popup>
  </div>
</template>

<script>
import { frimDetails, alterAttention } from '@/api/frim'
import QRCode from 'qrcodejs2'

export default {
  name: 'CompanyDetails',
  data() {
    return {
      DetailsList: {},
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
      showDialog: false,
      showPhone: false,
      Qrcode:null
    }
  },
  props: ['id'],
  created() {
    this.getCompanyDetails()
    // document.documentElement.scrollTop = 0
  },

  methods: {
    //    获取对应公司
    async getCompanyDetails() {
      const { data } = await frimDetails(this.id)
      this.DetailsList = data
    },
    // 关注功能
    cutAttention() {
      if (this.DetailsList.allow) {
        this.DetailsList = { ...this.DetailsList, allow: 0 }
        console.log(this.DetailsList)
      } else {
        this.DetailsList = { ...this.DetailsList, allow: 1 }
        console.log(this.DetailsList)
      }
      alterAttention({
        ...this.DetailsList,
      })
    },
    // 微信公众号
    showQrCode() {
      this.showDialog = true
      // 二维码生成是异步的
      if(this.Qrcode) return
      this.$nextTick(() => {
       this.Qrcode= new QRCode(this.$refs.qrCodejs, {
          text: '嗨嗨嗨，闲着没事做个汉堡',
          width: 150,
          height: 150,
          colorDark: 'black',
          clolrLiight: 'white',
        })
      })
    },
  },
}
</script>

<style scoped lang="less">
.CompanyDetails {
  background-color: #f8f8f8;
  /deep/.van-nav-bar__content {
    height: 150px;
    background-color: #3f51b5;
    padding-bottom: 54px;
    .van-nav-bar__left {
      height: 126px;
      margin-top: 10px;
      font-size: 32px;
      .van-nav-bar__arrow {
        color: #fff;
        font-size: 40px;
      }
    }
    .van-nav-bar__title {
      margin-left: 80px;
      margin-bottom: 8px;
      color: #fff;
      font-size: 32px;
      font-weight: 600;
    }
  }
  /deep/ .details-img {
    margin-top: -50px;
    z-index: 99;
    background-color: #fff;
    margin-bottom: 20px;
    .van-cell {
      width: 100%;
      height: 390px;
      padding: 0;
    }
    .van-grid {
      height: 294px;
    }
  }
  .details {
    padding: 48px 0 20px;
    margin: 0 32px 20px;
    height: 240px;
    text-align: center;
    background-color: #fff;
    border-radius: 10px;
    div {
      position: relative;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div {
        color: #3f51b5;
        display: flex;
        width: 50%;
        height: 120px;
        flex-direction: column;
        i::before {
          content: '';
          position: absolute;
          left: 100%;
          top: 15%;
          width: 4px;
          height: 80px;
          background-color: #ccc;
        }
        span {
          color: #000;
          font-size: 18px;
          font-weight: 600;
        }
      }
    }
    button {
      width: 152px;
      height: 50px;
      font-size: 18px;
      color: #fff;
      background-color: #3f51b5;
      border: 0;
      font-weight: 600;
      border-radius: 25px;
    }
  }
  .range {
    margin: 0 32px 20px;
    background-color: #fff;
    border-radius: 10px;
    .bar {
      position: relative;
      height: 106px;
      line-height: 106px;
      font-size: 22px;
      font-weight: 600;
      padding: 0 0 0 50px;
      border-bottom: 1px solid #f0eeee;
      span::before {
        content: '';
        position: absolute;
        left: 25px;
        top: 38px;
        width: 6px;
        height: 25px;
        background-color: #3f51b5;
      }
    }
    .footer {
      display: flex;
      align-items: center;
      padding: 32px 0 40px;
      div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 20px;
        font-weight: 600;
        text-align: center;
        margin-right: 20px;
        .top {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 110px;
          height: 110px;
          border-radius: 110px;
          background-color: #eeecec;
          margin-bottom: 24px;
          margin-left: 20px;
          .van-icon {
            color: #979191;
            font-size: 60px;
          }
        }
      }
    }
  }
  .datums {
    margin: 0 32px 20px;
    background-color: #fff;
    .head {
      height: 100px;
      border-bottom: 1px solid #f0eeee;
      div {
        display: inline-block;
        width: 50%;
        text-align: center;
        font-size: 25px;
        font-weight: 600;
        line-height: 100px;
      }
    }
    .cont {
      width: 100%;
      .bars {
        position: relative;
        height: 80px;
        line-height: 105px;
        font-size: 22px;
        font-weight: 600;
        padding: 0 0 0 50px;
        span::before {
          content: '';
          position: absolute;
          left: 25px;
          top: 38px;
          width: 6px;
          height: 25px;
          background-color: #3f51b5;
        }
      }
    }
    .basic {
      .bars {
        position: relative;
        height: 80px;
        line-height: 105px;
        font-size: 22px;
        font-weight: 600;
        padding: 0 0 0 50px;
        span::before {
          content: '';
          position: absolute;
          left: 25px;
          top: 38px;
          width: 6px;
          height: 25px;
          background-color: #3f51b5;
        }
      }
      .date {
        margin-left: 40px;
        font-size: 20px;
        color: #7b7777;
      }
    }
    .introduce {
      .bars {
        position: relative;
        height: 80px;
        line-height: 105px;
        font-size: 22px;
        font-weight: 600;
        padding: 0 0 0 50px;
        margin-bottom: 10px;
        span::before {
          content: '';
          position: absolute;
          left: 25px;
          top: 38px;
          width: 6px;
          height: 25px;
          background-color: #3f51b5;
        }
      }
      .text {
        margin-left: 40px;
        font-size: 20px;
        color: #7b7777;
        padding-bottom: 20px;
        p {
          margin: 0;
        }
      }
    }
  }
  .van-dialog {
    /deep/.van-dialog__content {
      padding: 20px 0 20px 180px;
    }
  }
  .van-popup--bottom {
    padding-top: 30px;
    text-align: center;
    color: rgb(0, 110, 255);
    font-size: 60px;
  }
}
</style>
